<style scoped lang="less">
	.kefu {
		padding: 3vw;
		font-size: 0.4rem;
		line-height: 2;
	}
	
	.kefu-img {
		width: 60vw;
		padding: 5vw;
	}
	.customer-service-phone{
		color: royalblue;
	}
</style>
<template>
	<van-popup round v-model="showPopup" v-if="kefuData!=null" @closed="closed">
		<div class="kefu">
			<img class="kefu-img" :src="GLOBAL.getUrl(kefuData.qrcode)">
			<div>微信号:{{kefuData.wx_no}}</div>
			<div>手机号:<a class="customer-service-phone" :href="'tel:'+kefuData.phone">{{kefuData.phone}}</a></div>
		</div>
	</van-popup>
</template>
<script>
  import Vue from 'vue';
  import {Popup} from 'vant';

  Vue.use(Popup);
  export default {
    name: 'customer-service',
    props: {
      show: {type: Boolean, default: false}
    },
    model: {
      prop: 'show',
      event: 'closed'
    },
    watch: {
      show: {
        immediate: true,
        handler(value) {
          this.showPopup = value;
        }
      },
      showPopup(newVal) {
        this.$emit('closed', newVal)
      }
    },
    data() {
      return {
        showPopup: this.show,
        kefuData: null
      }
    },
    created() {
      if (this.$store.state.site.config != null) {
        this.kefuData = {};
        this.kefuData.qrcode = JSON.parse(this.$store.state.site.config.customer_service_qrcode);
        this.kefuData.wx_no = this.$store.state.site.config.customer_service_wx_no;
        this.kefuData.phone = this.$store.state.site.config.customer_service_phone;
      }
    },
	  methods:{
      closed(){
      
      }
	  }

  }
</script>